<template>
	  <div class="common-layout">
	    <el-container>
	      <el-header style="width: 100%;height: 6rem;" >
		      <div>
		        <el-container>
		             <el-aside width="30%"></el-aside>
		             <el-main >
						 <img
						   style="width: 20%; margin-top: -1rem;"
						   src="../assets/tubiao.png"
						   alt="Element logo"
						 />
					 </el-main>
		             <el-aside width="40%">
						 <div style="display: inline-flex;margin-top: 2rem;">
						<p><el-icon style="color: red;" size="200%"><GoldMedal /></el-icon>100%正品</p>&emsp;&emsp;
						<p><el-icon style="color: red;" size="200%"><Timer /></el-icon>7天无理由</p>&emsp;&emsp;
						<p><el-icon style="color: red;" size="200%"><Calendar /></el-icon>限时抢购</p>
						 </div>
					 </el-aside>
		           </el-container>
		      </div>
		    
		  </el-header>
	      <el-main style="width: 100%;height:45rem;" class="main-background">
			<div style="display: flex;">
				<div style="width: 70%;">
					
				</div>
				<div>
					<div class="centered">
						<div style="display: flex;height: 14%; width: 100%;">
							<div style="width: 48%;text-align:center;margin-top: 1rem;">
								<el-link style="font-size: 1.25rem;" @click="data.gologin=true">账号登录</el-link>
							</div>
							<hr />
							<div style="width: 48%;text-align:center;margin-top: 1rem;">
								<el-link style="font-size: 1.25rem;" @click="data.gologin=false">手机号登录</el-link>
							</div>
							
						</div>
						&nbsp;
						<div style="width: 80%;height: 11%; display: flex;">&emsp;&emsp;&emsp;&emsp;
						<el-input v-if="data.gologin"  v-model="data.account"  placeholder="账号" :prefix-icon="User"/>
						<el-input v-if="data.gologin==false" v-model="data.phone"  placeholder="手机号" :prefix-icon="Cellphone"/>
						</div>
						&nbsp;
						<div style="width: 80%;height: 11%; display: flex;">&emsp;&emsp;&emsp;&emsp;
						<el-input v-model="data.password" placeholder="密码" :prefix-icon="Lock" type="password" clearable=""/>
						</div>
						&nbsp;
						<div style="width: 80%;height: 2rem; display: flex;">&emsp;&emsp;&emsp;&emsp;
						<el-input  v-model="data.captcha"  placeholder="验证码" :prefix-icon="SwitchButton"/>
						<el-image style="width: 10rem;height: 2rem;"
							:src="$ip+data.imageSrc" @click="captcha()"/>
						</div>
						
						
						<div style="margin-left: 15%;display: flex;">
							<el-checkbox v-model="data.article" size="large">
							</el-checkbox>
							&ensp;
							<div style="margin-top: 0.7rem; font-size: 0.8rem;">
							我已阅读并接受一下条款：
							<el-link type="primary">《服务条款》</el-link>
							<br />
							<el-link type="primary">《购物商城基本功能隐藏条款》</el-link>	
							</div>
						</div>
						&ensp;
						  <div style="text-align:center; margin: 0;width: 90%;height: 15%;">
							<el-button size="large"  text  @click="logins()" color="#FFFFFF">登录</el-button>
						    <el-button size="large" type="primary" @click="cancel()">
						      取消
						    </el-button>
							</div>
							<div style="width: 100%;margin-left: 30%;">
								<el-link  target="_blank" type="primary" @click="lose()" >忘记密码</el-link>&nbsp;&nbsp;&nbsp;&nbsp;
								<el-link  target="_blank" type="primary" @click="enroll()" >用户注册</el-link>
							</div>
							
							
					</div>
				</div>
			</div>
		  </el-main>
	      <el-footer style="width: 100%;height: 4.9rem;" >
			  <bottom></bottom>
			  </el-footer>
	    </el-container>
	  </div>
	
</template>


<script lang="ts" setup>
	import {ref, reactive,onMounted,computed} from"vue"
		import {$get,$postx,$postj,$postf,$capt} from '../ajax/index.js'
		import { ElMessage, ElMessageBox } from 'element-plus'
		import { User,Lock,Cellphone,UserFilled,GoldMedal,Timer,Calendar,SwitchButton} from '@element-plus/icons-vue'
		import router from"../router/index.js"
		import store from "../store/index.js"
		import {success,warning,message,errors} from '../store/alert.js'
		import bottom from "../components/bottom.vue"
		const data=reactive({
				phone:"",
				password:"",
				account:'',
				gologin:true,
				article:false,
				captcha:undefined,
				imageSrc:""
		})
		
		function captcha(){
			data.imageSrc=`/public/captcha?t=`+new Date().getTime()
		}
		
		
		function logins(){
			if(data.captcha==undefined){
				errors("验证码允许为空")
				return
			}
			if(data.article==false){
				errors("接受协议才能登录")
				return
			}
			let war="登录账号、密码不允许为空"
			if(data.gologin==false){
				war="登录手机号、密码不允许为空"
			}
			if(data.account!=""&&data.password!=""&&data.gologin==true){
				
				var fd=new FormData()
				fd.append("account",data.account)
				fd.append("password",data.password)
				fd.append("captcha",data.captcha)
				$postf("/public/login2",fd).then((resd)=>{	
					console.log(resd)
					console.log(resd.data.data)
					if(resd.data.code!=200){
						errors(resd.data.msg)
						return
					}
					window.localStorage.setItem("token",resd.data.data);
					$get("/user/info").then(function(resd){
						console.log(resd.data)
						const d= resd.data[1].data[1]
						store.state.user=d
						const c=d.perm[1].vip
						console.log(c)
						if(c=="cus"){
							router.push("/home")
						}else
						router.push("/"+c)
					})
					
				})
				
				return
			}
			if(data.phone!=""&&data.gologin==false&&data.password!=""){
				var fd=new FormData()
				fd.append("phone",data.phone)
				fd.append("password",data.password)
				fd.append("captcha",data.captcha)
				$postf("/public/login",fd).then((resd)=>{	
					console.log(resd)
					console.log(resd.data.data)
					if(resd.data.code!=200){
						errors(resd.data.msg)
						return
					}
					window.localStorage.setItem("token",resd.data.data);
					$get("/user/info").then(function(resd){
						console.log(resd.data)
						const d= resd.data[1].data[1]
						store.state.user=d
						const c=d.perm[1].vip
						console.log(c)
						if(c=="cus"){
							router.push("/home")
						}else
						router.push("/"+c)
					})
					
				})
				return
			}
			warning(war)
			return;	
			
			
			
		}
		function cancel(){
			console.log("退出")
			store.state.user={
				uname:'',
				pic:'',
				token:''
			}
			store.state.gologin=true
			router.push("/home")
		}
		function lose(){
			console.log("忘记密码")
			router.push("/fgpwd")
		}
		function enroll(){
			
			console.log("注册")
			router.push("/enroll")
		}
		
		
		onMounted(()=>{
			
			store.state.gologin=false
			data.imageSrc=`/public/captcha?t=`+new Date().getTime()
		})
</script>

<style>
	.main-background {
	  background-color: #f0f0f0;
	  background-image: url('../assets/dengl.png'); /* 若要使用背景图片 */
	  background-size: cover; /* 调整背景图片大小 */
	  background-repeat: no-repeat; /* 防止背景图片重复 */
	}
	.centered {
	            position: absolute;
	            top: 30%;
	            left: 60%;
	            width: 20%;
	            height: 42%;
	            margin-top: -25px;
	            margin-left: -50px;
	            background-color:rgba(255, 255, 255, 0.8);
	        }
	
</style>
